<template>
  <div>
    <el-button @click="isShow = true">控制dialog</el-button>
    <!--
        .sync:修饰符作用值的双向绑定类似于v-model

    dialog
    组件名:
    el-dialog
         title:标题
         width:宽度设置
         visible:是否可见boolean
         插槽：
            默认插槽：内容
            具名插槽(footer):常用于放取消确定等按钮
     -->
    <el-dialog title="标题测试" width="600px" :visible.sync="isShow">
      <div>我是内容</div>
      <template #footer>
        <div>
          <el-button type="primary">确定</el-button>
          <el-button @click="isShow = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>
<style></style>
